import React, {useState} from 'react';
import {ArrowLeftOutlined  } from '@ant-design/icons';
import {Button} from 'antd';
import './setting.css'
import {useNavigate} from "react-router-dom";
const Setting = () => {
    const [state, setState] = useState({
        notifications: true,
        darkMode: false,
        editingProfile: false,
        editingAddress: false,
        profile: {
            name: "张三",
            password: "123456"
        },
        address: "上海市浦东新区世纪大道1001号"
    });
    const { notifications, darkMode, editingProfile, editingAddress, profile, address } = state;
    const navigate = useNavigate();

    const handleToggle = (setting) => {
        setState((prevState) => ({
            ...prevState,
            [setting]: !prevState[setting]
        }));
    };

    const handleEditProfile = () => {
        setState((prevState) => ({
            ...prevState,
            editingProfile: !prevState.editingProfile
        }));
    };

    const handleSaveProfile = () => {
        // 这里可以添加保存个人资料的逻辑，比如调用API等
        setState((prevState) => ({
            ...prevState,
            editingProfile: false
        }));
    };

    const handleEditAddress = () => {
        setState((prevState) => ({
            ...prevState,
            editingAddress: !prevState.editingAddress
        }));
    };

    const handleSaveAddress = () => {
        // 这里可以添加保存地址的逻辑，比如调用API等
        setState((prevState) => ({
            ...prevState,
            editingAddress: false
        }));
    };

    const handleProfileChange = (e) => {
        const { name, value } = e.target;
        setState((prevState) => ({
            ...prevState,
            profile: {
                ...prevState.profile,
                [name]: value
            }
        }));
    };

    const handleAddressChange = (e) => {
        const value = e.target.value;
        setState((prevState) => ({
            ...prevState,
            address: value
        }));
    };

    const handleLogout = () => {
        // 清除用户信息的逻辑可以放在这里
        console.log("返回");
        navigate('/mall/user'); // 跳转到/user页面
    };


    return (
            <div className="settings-container" style={{ paddingTop: '20px',}}>
                <Button className="btn" onClick={handleLogout} type="text" icon={<ArrowLeftOutlined style={{ fontSize: '40px' }} />} ></Button>
                <h1>设置</h1>

                <section className="settings-section">
                    <h2>账户设置</h2>
                    <div className="setting-item">
                        <span>姓名</span>
                        {editingProfile ? (
                            <input type="text" name="name" value={profile.name} onChange={handleProfileChange} />
                        ) : (
                            <span>{profile.name}</span>
                        )}
                    </div>
                    <div className="setting-item">
                        <span>密码</span>
                        {editingProfile ? (
                            <input type="password" name="password" value={profile.password} onChange={handleProfileChange} />
                        ) : (
                            <span>******</span>
                        )}
                    </div>
                    <div className="setting-item">
                        {editingProfile ? (
                            <button onClick={handleSaveProfile}>保存</button>
                        ) : (
                            <button onClick={handleEditProfile}>编辑</button>
                        )}
                    </div>
                </section>

                <section className="settings-section">
                    <h2>通知设置</h2>
                    <div className="setting-item">
                        <span>接收通知</span>
                        <input
                            type="checkbox"
                            checked={notifications}
                            onChange={() => handleToggle('notifications')}
                        />
                    </div>
                    {/* 其他通知设置项 */}
                </section>

                <section className="settings-section">
                    <h2>隐私设置</h2>
                    <div className="setting-item">
                        <span>夜间模式</span>
                        <input
                            type="checkbox"
                            checked={darkMode}
                            onChange={() => handleToggle('darkMode')}
                        />
                    </div>
                    {/* 其他隐私设置项 */}
                </section>

                <section className="settings-section">
                    <h2>收货地址</h2>
                    <div className="setting-item">
                        <span>地址</span>
                        {editingAddress ? (
                            <input type="text" value={address} onChange={handleAddressChange} />
                        ) : (
                            <span>{address}</span>
                        )}
                    </div>
                    <div className="setting-item">
                        {editingAddress ? (
                            <button onClick={handleSaveAddress}>保存</button>
                        ) : (
                            <button onClick={handleEditAddress}>编辑</button>
                        )}
                    </div>
                </section>
            </div>
        );

};

export default Setting;